<template>
  <div class="app">
    <navigation> </navigation>

    <el-scrollbar class="app-scrollbar">
      <div class="navDown">
        <router-view />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import navigation from './components/navigation.vue'
import { ElScrollbar, ElConfigProvider, ElButton } from 'element-plus'
import { ref } from 'vue'

// import { useI18n } from 'vue-i18n'
// const I18n = useI18n()
// const { locale } = useI18n()

// const switchLang = () => {
//   if (locale === 'zh-cn') {
//     I18n.locale = 'en-us'
//   } else {
//     I18n.locale = 'zh-cn'
//   }
// }
</script>

<style lang="less">
.app {
  --headerHight: 50px;
  &-scrollbar {
    width: 100vw;
    height: calc(100vh - var(--headerHight));
  }
}
.el-popup-parent--hidden {
  width: 100% !important;
}

@media screen and (min-width: 2000px) and (max-width: 3900px) {
  .app-scrollbar {
    display: flex;
    justify-content: center;
  }
  .navDown {
    width: 2000px;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1600px) {
  .app-scrollbar {
    display: flex;
    justify-content: center;
  }
  .navDown {
    width: 1000px;
  }
}

@media screen and (min-width: 3900px) {
  .app-scrollbar {
    display: flex;
    justify-content: center;
  }
  .navDown {
    width: 3000px;
  }
}
</style>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
